<template>
  <form-dialog
    :title="title"
    :visible="visible"
    @handleClose="handleClose"
    width="30%"
  >
    <template #content>
      <div class="tip-container">
        <span class="text">{{ tip }}</span>
      </div>
      <div class="message-container">
        <span>{{ message }}</span>
      </div>
      <div class="form-container">
        <el-checkbox-group
          v-model="lockCheck">
          <div style="display:flex;justify-content: flex-start;align-items: center;flex-wrap:wrap;margin-left:20px">
            <el-checkbox border :disabled="!params" style="width:40%;margin:5px 10.5px 5px 10.5px" v-for="item in checkItems" :label="item.value"  :key="item.value">
              {{item.label}}
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :loading="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialog>
</template>
<script lang="ts">
import Vue from 'vue';
import FormDialog from '../../../components/Dialog/formDialog.vue';
export default Vue.extend({
  components: { FormDialog },
  props: {
    lockMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      title: "",
      tip: "",
      message: "",
      clientList: "",
      formData: {
        password: ""
      },
      formRules: {
      },
      params: true,
      lockCheck: [],
      checkItems:[{
        label: this.$t('clientListManage.locks.network'),
        value: "networkLock"
      },{
        label: this.$t('clientListManage.locks.display'),
        value: "displayLock"
      },{
        label: this.$t('clientListManage.locks.voice'),
        value: "voiceLock"
      },{
        label: this.$t('clientListManage.locks.auto'),
        value: "autoLoginLock"
      },{
        label: this.$t('clientListManage.locks.action'),
        value: "desktopActionsLock"
      }],
      checkData:{
        networkLock: false,
        displayLock: false,
        voiceLock: false,
        autoLoginLock: false,
        desktopActionsLock: false,
      }
      
    }
  },
  methods: {
    initItem() {
      // console.log(this.clientList)
      this.$pandaApi.apiGetClient(this.clientList).then((res: any) =>{
        if(res.locks) {
          let obj = JSON.parse(res.locks);
          for(let i in obj){
            if(obj[i as never])
              this.lockCheck.push(i as never)
          }
        }else {
          (this as any).checkData = {
            networkLock: false,
            displayLock: false,
            voiceLock: false,
            autoLoginLock: false,
            desktopActionsLock: false,
          }
        }
      })
    },
    async init({
      title,
      tip,
      message,
      clientList,
      params
    }: any) {
      (this as any).title = title;
      (this as any).tip = tip;
      (this as any).message = message;
      (this as any).clientList = clientList;
      (this as any).params = params;
      (this as any).lockCheck = []
      await this.initItem();
      (this as any).visible = true;
      (this as any).checkData = {
        networkLock: false,
        displayLock: false,
        voiceLock: false,
        autoLoginLock: false,
        desktopActionsLock: false,
      };
      
    },
    handleClose() {
      (this as any).visible = false;
      (this as any).loading = false;
    },
    submit() {
      (this as any).loading = true;
      for(let i in this.lockCheck) {
        (this as any).checkData[this.lockCheck[i]] = true;
      }
      const data = {
        locks: JSON.stringify(this.checkData)
      };
      (this as any).lockMethod((this as any).clientList, data).then(() => {
        (this as any).visible = false;
      }).finally(() => {
        (this as any).loading = false;
      });
    }
  }
})
</script>
<style lang="scss" scoped>
  .tip-container {
    .icon {
      width: 80px;
      padding-right: 20px;
      display: inline-block;
      text-align: right;
      &::before {
        font-size: 20px;
        color:#fe983d;
      }
    }

    .text {
      color: #333333;
      font-size: 16px;
    }
  }
  .message-container {
    color: #999999;
    font-size: 12px;
    padding-left: 80px;
    margin: 10px 0px;
  }
</style>